<!--  -->
<template>
  <div class="cloud_container">
    <div class="musicList">
      <div class="list_wrap">
        <div class="item_wrap">
          <div
            @dblclick="startSong(item)"
            v-for="(item, index) in songList"
            :key="index"
            class="item"
            :class="{ active_position: item.id === songId }"
          >
            <div @click="toAlbum(item.al.id)" class="cover">
              <img :src="item.al.picUrl" alt="" />
            </div>
            <div class="info">
              <div class="name">
                {{ item.name }}
              </div>
              <div class="creator_name">{{ item.ar[0].name }}</div>
            </div>
            <div class="album">{{ item.al.name }}</div>
            <div class="timer">
              {{ Math.floor(item.dt / 1000) | timeFormat }}
            </div>
            <div class="btn">
              <div
                @click="download(item.id, item.name)"
                class="iconfont icon-yunxiazai_o load"
              ></div>
            </div>
            <div class="mv">
              <el-button
                @click="toDetail(item.mv)"
                size="mini"
                v-if="item.mv != 0"
                type="primary"
                >mv</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getCloudInfo, getCloudMusic } from "@/util/music.js";
import { getMusicUrl } from "@/util/findMusic";
import { mapGetters } from "vuex";
import { getDownloadUrl } from "@/util/music.js";
import axios from "axios";

export default {
  name: "",
  data() {
    return {
      songIds: "",
      songList: [],
    };
  },
  computed: {
    ...mapGetters("musicPlay", [
      //当前播放歌曲id
      "songId",
      //是否在播放
      "isPlaying",
      "hasPlayList",
    ]),
  },
  created() {
    this.getCloudInfo();
  },
  mounted() {},
  methods: {
    //获取云盘数据
    async getCloudInfo() {
      let {
        data: { data },
      } = await getCloudInfo();
      // console.log(data);
      this.songList = data.map((v) => v.simpleSong);
    },
    //获取云盘歌曲
    async getCloudMusic() {
      let {
        data: { data },
      } = await getCloudMusic(this.songIds);
      //   console.log(data);
    },
    //播放歌曲
    async startSong(musicDetail) {
      //保存当前播放列表
      this.$store.dispatch("musicPlay/savePlayList", this.songList);
      sessionStorage.setItem("playList", JSON.stringify(this.songList));

      //保存播放状态
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);
      sessionStorage.setItem("songId", musicDetail.id);
    },
    //获取歌曲播放链接
    async getMusicUrl(id) {
      let {
        data: { data },
      } = await getMusicUrl(id);

      //保存歌曲url
      this.$store.dispatch("musicPlay/saveMusicUrl", data[0].url);
    },
    //跳转去专辑
    toAlbum(id) {
      if (id) {
        this.$router.push("/albumDetail/" + id);
      }
    },
    //下载1歌曲
    async download(id, name) {
      let {
        data: { data },
      } = await getDownloadUrl(id);
      // console.log(data)
      if (data.url) {
        const fileName = name; // 导出文件名
        axios({
          url: data.url,
          responseType: "blob",
          headers: { "content-type": "audio/mpeg" },
        }).then((res) => {
          // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
          // IE10以上支持blob但是依然不支持download
          const blob = new Blob([res.data], { type: res.data.type });
          if ("download" in document.createElement("a")) {
            // 支持a标签download的浏览器
            const link = document.createElement("a"); // 创建a标签
            link.download = fileName; // a标签添加属性
            link.style.display = "none";
            link.href = URL.createObjectURL(blob);
            document.body.appendChild(link);
            link.click(); // 执行下载
            URL.revokeObjectURL(link.href); // 释放url
          }
        });
      } else {
        this.$message("开通会员后可下载");
      }
    },
    toDetail(id) {
      this.$store.dispatch("musicPlay/saveIsPlaying", false);

      this.$router.push("/mvDetail/" + id);
    },
  },
};
</script>

<style lang='less' scoped>
.cloud_container {
  .musicList {
    // padding: 2rem 5.25rem;
    .list_wrap {
      // width: 80%;
      .item_wrap {
        .item {
          background-color: #fff;
          height: 40px;
          padding: 10px 0;
          display: flex;
          align-items: center;
          border-radius: 10px;
          .cover {
            margin: 0 10px;
            width: 45px;
            height: 45px;
            border-radius: 5px;
            img {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              box-shadow: 2px 2px 12px 4px rgba(0, 0, 0, 0.1);
            }
          }
          .info {
            margin-left: 10px;
            width: 30%;
            .name {
              width: 100%;
              font-weight: 600;
              font-size: 17px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            .creator_name {
              color: #525252;
              font-size: 13px;
            }
            .active_position {
              color: #335eea;
            }
          }
          .album {
            color: #525252;
            width: 30%;
            font-size: 15px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .timer {
            margin-left: 5px;
            color: #525252;
            font-size: 15px;
          }
          .btn {
            width: 20%;
            display: flex;
            align-items: center;
            justify-content: center;
            div {
              display: none;
              margin-left: 20px;
            }
            div:hover {
              transform: scale(1.1);
            }
            .like {
              font-size: 23px;
            }
          }
          .mv {
            width: 8%;
            text-align: right;
            margin-right: 10px;
            &:hover .el-button {
              transform: scale(1.1);
            }
            .el-button {
              background-color: #fff;
              color: rgb(16, 24, 134);
              font-weight: 600;
              border: none;
              border-radius: 5px;
            }
          }
        }
        .active_position {
          color: #335eea;
          background: #eaeffd;
          .info {
            .name,
            .creator_name {
              color: #335eea;
            }
          }
          .album,
          .timer {
            color: #335eea;
          }
        }
        .item:hover {
          background-color: #f6f6f8;
        }
        .item:hover .btn div {
          display: block;
        }
      }
    }
  }
}
</style>